<template>
  <div class="condition">
    <div class="condition_input">
      <div
        v-for="(item, index) in conditionList"
        :key="index">
        {{ item.label + '：' }}
        <component
          :is="item.antComponentName"
          v-model:value="condition[item.key]"/>
      </div>
    </div>
    <a-button
      class="condition_btn"

      @click="queryFromBtn">
      <template #icon> <SearchOutlined /> </template>查询
    </a-button>
    <a-button
      class="condition_btn reset"
      @click="reset">
      <template #icon>
        <RedoOutlined />
      </template>
    </a-button>
  </div>
</template>
<script setup>
import { reactive, defineProps, defineEmits, defineExpose } from 'vue'

const props = defineProps({
  conditionList: {
    type: Array,
    default: () => []
  }
})

const conditon = reactive({})
/** 事件 */
const emit = defineEmits(['reset', 'query'])

/** 重置条件 */
const reset = () => {

}
/** 获取条件 */
const getCondition = () => {

}

defineExpose({
  reset,
  getCondition
})
</script>
<style lang="less" scoped>
.condition {
  display: flex;
  min-height: 74px;
  align-items: center;
}
.condition_input {
  width: calc(100% - 150px);
  height: 100%;
  margin-right: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  align-items: center;
}
.condition_input > div {
  height: 34px;
  display: flex;
  align-items: center;
  margin-right: 24px;
}
.condition_input > div > div,
.condition_input > div > span,
.condition_input > div > input {
  width: 150px;
  text-align: left;
}
.condition_btn {
  margin-left: 10px;
}
.reset {
  width: 48px;
}
</style>
